<template>
  <div class="app-container">
    <br>
    <el-button type="primary" @click="add">新增单位</el-button>
    <br>
    <br>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    > 
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="单位名称" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center" width="300" >
        <template slot-scope="scope">
          <el-button type="success"  @click="update(scope.row)" size="small">修改</el-button>
          <el-button type="danger" @click="deleteInfo(scope)" size="small">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="200" align="center">
        <template slot-scope="scope" >
          <el-button  @click="move(scope.$index, 1)" size="small">上移</el-button>
          <el-button  @click="move(scope.$index, 2)" size="small">下移</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="->, total, prev, pager, next"
      :total="this.total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="clickCurPage"
      >
    </el-pagination>
  <el-dialog :title="dialogTitle" :visible.sync="formVisible" :closeOnClickModal="false" width="70%">
      <h2>单位信息</h2>
      <br>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="单位名称">
            <el-input v-model="form.name" style="width:90%;"/>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm">确 定</el-button>
          <div style="width:200px;display: inline-block;"> </div>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
  </el-dialog>
  </div>
</template>

<script>

import { getList, edit, add, del} from '@/api/dictionary'

export default {
  name: "Unit",
  filters: {

  },
  data() {
    return {
      list: null,
      listLoading: true,
      currentPage: 1,
      pageSize: 100,
      total: 0,
      curIndex: -1,
      formVisible: false,
      info: {},
      form: {},
      dialogTitle: '修改单位',
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList({currentPage: this.currentPage, pageSize: this.pageSize, type : 1}).then(res=>{
        console.log(res)
        this.list = res.data
        this.total = res.data.length
        this.listLoading = false
      }).catch(err=>{
        console.log("err")
        console.log(err)
        this.listLoading = false
      })
    },
    clickCurPage(val){
      this.currentPage = val
      this.fetchData()
    },
    update(row) {
      this.reset()
      this.form = JSON.parse(JSON.stringify(row))
      this.formVisible = true
    },
    deleteInfo(scope) {
      console.log(scope.row)
      this.$confirm('确定删除该单位?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(scope.row.id).then(res=>{
          this.list.splice(scope.$index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(err=>{
          console.log(err)
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    confirm() {
      this.listLoading = true
      console.log(this.form)
      if(this.form.id) {  // update
        edit(this.form).then(res=>{
          console.log(res)
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.formVisible = false
          this.listLoading = false
          this.$tab.refreshPage({path: '/dictionary/unit', name: "Unit"});
        }).catch(err=>{
          console.log(err)
        })
      } else { // add
        this.form.type = 1
        add(this.form).then(res=>{
          this.formVisible = false
          this.listLoading = false
          this.$tab.refreshPage({path: '/dictionary/unit', name: "Unit"});
        }).catch(err=>{
          console.log(err)
        })
      }
    },
    cancel() {
      this.formVisible = false
    },
    reset(){
      this.form = {}
    },
    add() {
      this.reset()
      this.dialogTitle = '添加单位'
      this.formVisible = true
    },
    selectJobDuty(item, index) {
      console.log(item)
      this.form.jobDuty[index].name = item.name
    },
    deleteAuditDuty(index) {
      this.form.jobDuty.splice(index, 1)
    },
    move(rowIndex, type) {
      this.listLoading = true
      if(type === 1) {
        // 上移
        if(rowIndex === 0) {
          this.listLoading = false
          return
        }
        this.list[rowIndex].sort--
        this.list[rowIndex-1].sort++
        edit(this.list[rowIndex-1]).then(res=>{
          edit(this.list[rowIndex]).then(res=>{
            this.$tab.refreshPage({path: '/dictionary/unit', name: "Unit"});
          })
        })
      } else {
        // 下移
        if(rowIndex === this.list.length-1) {
          this.listLoading = false
          return
        }
        this.list[rowIndex+1].sort--
        edit(this.list[rowIndex+1]).then(res=>{
          this.list[rowIndex].sort++
          edit(this.list[rowIndex]).then(res=>{
            this.$tab.refreshPage({path: '/dictionary/unit', name: "Unit"});
          })
        })
      }
    },
  }
}
</script>
